<template>
  <div style="height: 100%;width: 100%;">
    <div id="container1" style="height: 47%;width: 100%;"></div>
    <div id="container2" style="height:47%;width: 100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import reslist from "../json/position.js";
  import chartmixins from "../chartmixins.js";
    export default {
        name: "leftthree",
        mixins: [chartmixins],
       mounted() {
         this.temperature()
         this.humidity()
      },
      methods:{
        temperature(){
          var dom = document.getElementById("container1");
          var myChart = echarts.init(dom, "dark");
          var app = {};
          let option = null;
          option = {
            ...this.options,
            color: [
              "#002699",
              "#00992677",
              "#99002677",
              "#144FFF77",
              "#99007377",
              "#D6A10077",
              "#73990077"
            ],
            tooltip: {
              trigger: "item",
              formatter: "{b}: {c}"
            },
            title: {
              // text: "温度",
              // subtext: "纯属虚构",
              // x: "center"
            },
            xAxis: {
              type: "category",
               show:false,
              splitLine: {
                show: false
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              axisLabel: {
                formatter: function(value) {
                  return ''
                }
              },
//            data: ['柜1','柜2','柜3','柜4','柜5','柜6','柜7','柜8','柜9','柜10']
							data: ['成都站','龙泉驿站','洛带站','羊马站','简阳站','禾丰站','高寿站','乐至站','石湍站','安岳站']


            },
            grid: {
              //控制图表上下左右距离
              left: "5%",
              top: "25%",
              right: "5%",
              bottom: "0%",
              containLabel: true
            },
            yAxis: [
              {
                type: "value",
                name: "温度前十",
                // min: 0,
                // max: 200,
                interval: 10,
               
                axisTick:{       //y轴刻度线
                  show:false
                },
                axisLabel: {
                  formatter: "{value}"
                },
                splitLine: {
                  //网格线
                  show: true,
                  lineStyle:{
                    color: ['#3577c0'],
                    width: 1,
                  }
                }
              }
            ],
            toolbox: {
              show: true,
              feature: {
                mark: {
                  show: true
                }
              }
            },
            calculable: true,
            series: [
              {
                type: "bar",
                itemStyle: {
                  color: '#00ffff'
                },
                barWidth : 20,
                data: ['10','20','15','21','10','20','15','21','10','20']
              }
            ]
          };
          myChart.setOption(option, true);
          this.myChart = myChart;
          window.addEventListener("resize", () => {
            this.myChart.resize();
          });
        },
        humidity(){
          var dom = document.getElementById("container2");
          var myChart = echarts.init(dom, "dark");
          var app = {};
          let option = null;
          option = {
            ...this.options,
            color: [
              "#002699",
              "#00992677",
              "#99002677",
              "#144FFF77",
              "#99007377",
              "#D6A10077",
              "#73990077"
            ],
            tooltip: {
              trigger: "item",
              formatter: "{b}: {c}"
            },
            title: {
              // text: "温度",
              // subtext: "纯属虚构",
              // x: "center"
            },
            xAxis: {
              type: "category",
               show:false,
              splitLine: {
                show: false
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              axisLabel: {
                formatter: function(value) {
                  return ''
                }
              },
              data: ['洛带站机柜','羊马站机柜','简阳站机柜','禾丰站机柜','高寿站机柜','乐至站机柜','石湍站机柜','安岳站机柜','兴隆站机柜','李家站机柜']

            },
            grid: {
              //控制图表上下左右距离
              left: "5%",
              top: "25%",
              right: "5%",
              bottom: "0%",
              containLabel: true
            },
            yAxis: [
              {
                type: "value",
                name: "湿度前十",
                // min: 0,
                // max: 200,
                interval: 10,
                axisTick:{       //y轴刻度线
                  show:false
                },
                axisLabel: {
                  formatter: "{value}"
                },
                splitLine: {
                  //网格线
                  show: true,
                  lineStyle:{
                    color: ['#3577c0'],
                    width: 1,
                  }
                }
              }
            ],
            toolbox: {
              show: true,
              feature: {
                mark: {
                  show: true
                }
              }
            },
            calculable: true,
            series: [
              {
                type: "bar",
                itemStyle: {
                  color: '#2c84cf'
                },
                barWidth : 20,
                data: ['10','20','15','21','10','20','15','21','10','20']
              }
            ]
          };
          // reslist.map(item => {
          //   item.devlist.map(devitem => {
          //     option.series[0].data.push(_.random(10, 30));
          //     option.xAxis.data.push(devitem.name);
          //     // option.legend.data.push(tunnelitem.name)
          //   });
          // });
          myChart.setOption(option, true);
          this.myChart = myChart;
          window.addEventListener("resize", () => {
            this.myChart.resize();
          });
        }
      }
    }
</script>

<style scoped>

</style>
